<template>
  <component :is="componentName" :form="from" @getRules="getRules" />
</template>
<script>
export default {
  name: 'ComponentColumn',
  props: {
    formType: {
      type: String,
      require: false
    },
    from: {
      type: Object,
      require: true
    }
  },
  data() {
    return {
      type: this.formType,
      componentName: null
    }
  },
  watch: {
    formType: {
      handler(newName, oldName) { // 值发生变化时
        if (newName == null || newName === '') {
          this.componentName = null
        } else {
          this.type = newName
          const res = () => import(`./formItem/${this.type}`)
          this.componentName = res
        }
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    }
  },
  mounted() {
    if (this.formType != null && this.formType !== '') {
      const res = () => import(`./formItem/${this.type}`)
      this.componentName = res
    }
  },
  methods: {
    getRules(data) {
      this.$emit('changeRules', data)
    }
  }
}
</script>

<style scoped>

</style>
